<!--
 * @Description: 
 * @Autor: 商晓彬
 * @Date: 2021-06-23 12:09:31
 * @LastEditors: 商晓彬
 * @LastEditTime: 2022-02-21 09:54:44
-->
<div bsModal #createOrEditModal="bs-modal" (onShown)="onShown()" class="add modal fade" tabindex="-1" role="dialog"
    aria-labelledby="createOrEditModal" aria-hidden="true" [config]="{backdrop: 'static', keyboard: !saving}">
    <div style="width:1440px!important;margin: 1.75rem auto;">
        <div class="modal-content">
            <form *ngIf="active" #bopForm="ngForm" novalidate (ngSubmit)="save()" autocomplete="off">
                <div class="modal-header">
                    <h4 class="modal-title">
                        <span>{{title}}</span>
                    </h4>
                    <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')"
                        [disabled]="saving">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="height: 630px!important;overflow: auto;">
                    <div class="form-group" style="display: flex; position: relative;">
                        <!-- <button style="margin-left: 20px;" pButton type="button" label="创建发次" (click)="add()"></button> -->
                        <label for="modelName" style="margin-top: 7px;">型号</label>
                        <input style="width: 200px;margin-left: 10px;" readonly id="model" #modelNameInput="ngModel"
                            type="text" name="model" class="form-control" [(ngModel)]="form.model" maxlength="256" />
                        <label for="modelName" style="margin-top: 7px;margin-left: 50px;">发次</label>
                        <input style="width: 200px;margin-left: 10px;" readonly id="sendTime" #modelNameInput="ngModel"
                            type="text" name="sendTime" class="form-control" [(ngModel)]="form.sendTime"
                            maxlength="256" />
                        <label for="materialCode" style="margin-top: 7px;margin-left: 50px;">图号</label>
                        <input style="width: 200px;margin-left: 10px;" readonly id="materialCode" #modelInput="ngModel"
                            type="text" name="materialCode" class="form-control" [(ngModel)]="form.materialCode"
                            maxlength="256" />
                        <label for="materialname" style="margin-top: 7px;margin-left: 50px;">名称</label>
                        <input style="width: 200px;margin-left: 10px;" readonly id="materialname" #lotNoInput="ngModel"
                            type="text" name="materialname" class="form-control" [(ngModel)]="form.materialname"
                            maxlength="256" />
                        <button style="margin-left: 20px;" pButton type="button" label="新增芯级"
                            (click)="addSon()" [disabled]="bomUsing"></button>
                        <!-- <button [hidden]="!addFlag" style="margin-left: 20px;" pButton type="button" label="导出数据"
                        (click)="export()"
                        ></button> -->
                    </div>
                    <div class="row align-items-center" style="margin-top: 25px;">
                        <div class="primeng-datatable-container">
                            <!-- selectionMode="single" [(selection)]="selectedNode"
                                dataKey="id" -->
                            <p-treeTable [value]="treeData" (onLazyLoad)="getTreedata()" [scrollable]="true"
                                scrollHeight="600px">
                                <ng-template pTemplate="header">
                                    <tr>
                                        <th style="width: 150px">Bom层级</th>
                                        <th style="width: 300px">操作</th>
                                        <th style="width: 150px">图号</th>
                                        <th style="width: 150px">名称</th>
                                        <th style="width: 150px">规格型号</th>
                                        <th style="width: 150px">年代号</th>
                                        <th style="width: 86px">Bom用量</th>
                                        <th style="width: 150px">状态</th>
                                        <th style="width: 81px">属性</th>
                                        <th style="width: 110px">类别</th>
                                        <th style="width: 110px">细分类别</th>
                                        <th style="width: 80px">单位</th>
                                        <th style="width: 150px">创建人</th>
                                        <th style="width: 150px">备注</th>
                                        <th style="width: 150px">Bom版本</th>
                                    </tr>
                                </ng-template>
                                <ng-template pTemplate="body" let-rowNode="$implicit" let-rowData="rowData">
                                    <tr [ttSelectableRow]="rowNode" [ttRow]="rowNode" ttEditableColumn>
                                        <td style="width: 150px">
                                            <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
                                            {{rowData.levelNum}}
                                        </td>
                                        <td style="width: 300px">
                                            <button
                                                [hidden]="rowData.materialTypeName == '零件' || rowData.status == 1 || rowData.status == 3 || rowData.materialTypeName == '整装'" 
                                                type="button" class="form-btn"
                                                (click)="addSonData(rowData,rowNode)">添加</button>
                                            <button *ngIf="rowData.status != 1 && rowData.status != 3"
                                                [hidden]="!addFlag || rowData.levelNum !=3" type="button"
                                                class="form-btn" (click)="import(rowData)">导 入</button>
                                            <button
                                                *ngIf="rowData.status != 1 && rowData.status != 3 && rowData.deleStatus != -1"
                                                [hidden]="rowData.sonLevel == 1 || rowData.levelNum == 1 || rowData.status == 3 "
                                                type="button" class="form-btn" (click)="delete(rowData)">删 除</button>
                                            <button
                                                *ngIf="rowData.status != 1 && rowData.status != 3 && rowData.deleStatus != 1"
                                                [hidden]="!addFlag || rowData.levelNum != 3" type="button"
                                                class="form-btn" (click)="update(rowData)">发起审核</button>
                                        </td>
                                        <td style="width: 150px">{{rowData.materialNo}}</td>
                                        <td style="width: 150px">{{rowData.materialName}}</td>
                                        <td style="width: 150px">{{rowData.model}}</td>
                                        <td style="width: 150px">{{rowData.yearsNo}}</td>
                                        <td style="width: 86px">
                                            <span *ngIf="rowData.levelNum >= 4">{{rowData.unit1BomDosage}}</span>
                                        </td>
                                        <td style="width: 150px">{{selectStatus(rowData.status)}}</td>
                                        <td style="width: 81px">{{rowData.materialPropertyName}}</td>
                                        <td style="width: 110px">{{rowData.materialTypeName}}</td>
                                        <td style="width: 110px">{{rowData.materialSegmentationName}}</td>
                                        <td style="width: 80px">{{rowData.unitName}}</td>
                                        <td style="width: 150px">{{rowData.createUserName}}</td>
                                        <td style="width: 150px">{{rowData.remark}}</td>
                                        <td style="width: 150px">{{rowData.versionNo}}</td>
                                    </tr>
                                </ng-template>
                            </p-treeTable>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button *ngIf="!addFlag" type="submit" class="btn btn-primary" [disabled]="!bopForm.form.valid"
                        [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')"><i class="fa fa-save"></i>
                        <span>保存</span></button>
                </div>
                <!-- 新增弹窗 -->
                <p-dialog class="dialog" draggable=false header="新增" [(visible)]="addParent"
                    (onHide)="closeParent($event)" [style]="{width: '800px', height: '500px'}" [baseZIndex]="1000">
                    <div class="modal-body" *ngIf="addParent">
                        <div class="form-group" style="display: flex;">
                            <label for="materialCode" style="margin-top: 7px;">图号*</label>
                            <input name="addmaterialCode" style="width: 200px;margin-left: 10px;" id="addmaterialCode"
                                #materialCodeInput="ngModel" type="text" class="form-control"
                                [(ngModel)]="addForm.materialCode" maxlength="256" required />
                            <validation-messages [formCtrl]="materialCodeInput"></validation-messages>
                            <label for="materialname" style="margin-top: 7px;margin-left: 100px;">名称*</label>
                            <input name="addmaterialname" style="width: 200px;margin-left: 10px;" id="addmaterialname"
                                #materialnameInput="ngModel" type="text" class="form-control"
                                [(ngModel)]="addForm.materialname" maxlength="256" required />
                            <validation-messages [formCtrl]="materialnameInput"></validation-messages>
                        </div>
                        <div class="form-group" style="display: flex;">
                            <label for="materialProperties" style="margin-top: 7px;margin-right: 10px;">属性*</label>
                            <p-dropdown required name="addmaterialProperties" #materialPropertiesSelect="ngModel"
                                [options]="materialPropertiesOption" [(ngModel)]="addForm.materialProperties">
                                <ng-template let-select pTemplate="selectedItem">
                                    <span
                                        style="vertical-align:middle; margin-left: .5em;width:175px;">{{select.label}}</span>
                                </ng-template>
                                <ng-template let-select pTemplate="select">
                                    <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                        <div style="font-size:14px;float:right;margin-top:4px;width: 175px;">
                                            {{select.label}}</div>
                                    </div>
                                </ng-template>
                            </p-dropdown>
                            <validation-messages [formCtrl]="materialPropertiesSelect"></validation-messages>
                            <label for="model"
                                style="margin-top: 7px;margin-left: 100px;margin-right: 10px;">规格型号*</label>
                            <p-dropdown required name="addModel" #materialModelInput="ngModel" [options]="modelOptions"
                                [(ngModel)]="addForm.materialModel" (onChange)="onChange($event)">
                                <ng-template let-select pTemplate="selectedItem">
                                    <span
                                        style="vertical-align:middle; margin-left: .5em;width:175px;">{{select.label}}</span>
                                </ng-template>
                                <ng-template let-select pTemplate="select">
                                    <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                        <div style="font-size:14px;float:right;margin-top:4px;width: 175px;">
                                            {{select.label}}</div>
                                    </div>
                                </ng-template>
                            </p-dropdown>
                            <validation-messages [formCtrl]="materialModelInput"></validation-messages>
                        </div>
                        <div class="form-group" style="display: flex;">
                            <label for="materialType"
                                style="margin-top: 7px;margin-right: 10px;width: 63.72px;">发次*</label>
                            <p-dropdown required name="sendTime" #sendTimeInput="ngModel" [options]="sendTimeOptions"
                                [(ngModel)]="addForm.sendTime">
                                <ng-template let-select pTemplate="selectedItem">
                                    <span
                                        style="vertical-align:middle; margin-left: .5em;width:175px;">{{select.label}}</span>
                                </ng-template>
                                <ng-template let-select pTemplate="select">
                                    <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                        <div style="font-size:14px;float:right;margin-top:4px;width: 175px;">
                                            {{select.label}}</div>
                                    </div>
                                </ng-template>
                            </p-dropdown>
                            <validation-messages [formCtrl]="sendTimeInput"></validation-messages>
                            <label style="margin-top: 5px; margin-left: 100px;" for="isUsed">是否启用*</label>
                            <p-toggleButton name="isUsed" style="margin-left: 10px" [(ngModel)]="addForm.isUsed"
                                onLabel="启用" offLabel="停用" onIcon="pi pi-check" offIcon="pi pi-times"
                                [style]="{'width':'150px'}">
                            </p-toggleButton>
                        </div>
                        <div class="form-group">
                            <label for="remark">备注</label>
                            <input style="margin-left: 10px;" id="remark" type="text" name="remark" class="form-control"
                                [(ngModel)]="addForm.remark" maxlength="256" />
                        </div>
                    </div>
                    <div class="modal-footer" style="margin-top: 14px;">
                        <button [disabled]="!bopForm.form.valid" style="margin-left: 20px;" pButton type="button"
                            label="保存" (click)="addSave()"></button>
                    </div>
                </p-dialog>
            </form>
            <!-- 代码弹窗 -->
            <materialCode #materialCode [editData]="rowdata" [title]="parentTitle" (modalSave)="chooseP($event)">
            </materialCode>
            <!-- 子集 -->
            <materialSon #materialSon [editData]="rowdata" [title]="sonTitle" [addSecond]="secondSon" [type]="sonType"
                [flag]="addFlag" [nodeLevel]="nodeLevel" (modalSave)="chooseS($event)">
            </materialSon>
            <!-- 导入弹窗 -->
            <p-dialog header="导入文件" [(visible)]="display" modal="modal" [responsive]="true">
                <p>提示：导入前请先下载模板<a style="color:#41ABE9" (click)="down()">点击下载模板</a></p>
                <p-fileUpload *ngIf="display" name="file" customUpload="true" (uploadHandler)="myUploader($event)"
                    accept='application/vnd.ms-excel' multiple="false" maxFileSize="1000000" chooseLabel="请选择上传文件"
                    uploadLabel="上传" cancelLabel="取消">
                    <ng-template pTemplate="content">
                        <ul *ngIf="uploadedFiles.length">
                            <li *ngFor="let file of uploadedFiles">{{file.name}} - {{file.size}} bytes</li>
                        </ul>
                    </ng-template>
                </p-fileUpload>
                <p-footer>
                    <button type="button" pButton icon="fa-close" (click)="display=false" label="取消"></button>
                </p-footer>
            </p-dialog>
            <!-- 修改子集4-5弹窗 -->
            <p-dialog class="sonDialog" header="维护子集用量" [(visible)]="bomUsing" modal="modal" [responsive]="true"
                (onHide)="onHide($event)" [style]="{width: '1390px', height: '420px'}">
                <div class="modal-body" style="height: 306px;overflow: auto;">
                    <div class="row align-items-center">
                        <div class="primeng-datatable-container">
                            <p-treeTable [value]="sonData" [scrollable]="true" scrollHeight="290px">
                                <ng-template pTemplate="header">
                                    <tr>
                                        <th style="width: 100px">Bom层级</th>
                                        <th style="width: 150px">图号</th>
                                        <th style="width: 150px">名称</th>
                                        <th style="width: 150px">规格型号</th>
                                        <th style="width: 220px">年代号</th>
                                        <th style="width: 120px">Bom用量</th>
                                        <th style="width: 150px">细分类别</th>
                                        <th style="width: 150px">单位</th>
                                        <th style="width: 150px;">创建人</th>
                                        <th style="width: 250px">备注</th>
                                    </tr>
                                </ng-template>
                                <ng-template pTemplate="body" let-rowNode="$implicit" let-rowData="rowData">
                                    <tr [ttSelectableRow]="rowNode" [ttRow]="rowNode" ttEditableColumn>
                                        <td style="width: 100px">
                                            <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
                                        </td>
                                        <td style="width: 150px">{{rowData.materialNo}}</td>
                                        <td style="width: 150px">{{rowData.materialName}}</td>
                                        <td style="width: 150px">{{rowData.model}}</td>
                                        <td style="width: 220px">
                                            <p-treeTableCellEditor
                                                *ngIf="rowData.levelNum >=4 && rowData.materialSegmentationName == '标准件' ">
                                                <ng-template pTemplate="input">
                                                    <input style="width: 200px;" (blur)="submitDetail(rowData)"
                                                        [name]="rowData.id+rowData.sonId" type="text"
                                                        [(ngModel)]="rowData.yearsNo">
                                                </ng-template>
                                                <ng-template pTemplate="output">
                                                    {{rowData.yearsNo}}
                                                </ng-template>
                                            </p-treeTableCellEditor>
                                            <span
                                                *ngIf="rowData.levelNum < 4 && rowData.materialSegmentationName != '标准件'">
                                                {{rowData.yearsNo}}</span>
                                        </td>
                                        <td style="width: 120px">
                                            <p-treeTableCellEditor *ngIf="rowData.levelNum >= 4 ">
                                                <ng-template pTemplate="input">
                                                    <input style="width: 100px;" (blur)="submitDetail(rowData)"
                                                        [name]="rowData.sonId" type="number"
                                                        [(ngModel)]="rowData.unit1BomDosage">
                                                </ng-template>
                                                <ng-template pTemplate="output">
                                                    {{rowData.unit1BomDosage}}
                                                </ng-template>
                                            </p-treeTableCellEditor>
                                            <span *ngIf="rowData.levelNum < 4 "> {{rowData.unit1BomDosage}}</span>
                                        </td>
                                        <td style="width: 150px">{{rowData.materialSegmentationName}}</td>
                                        <td style="width: 150px">{{rowData.unitName}}</td>
                                        <td style="width: 150px">{{rowData.createUserName}}</td>
                                        <td style="width: 250px">
                                            <p-treeTableCellEditor *ngIf="rowData.levelNum >=4">
                                                <ng-template pTemplate="input">
                                                    <input (blur)="submitDetail(rowData)" [name]="rowData.id"
                                                        type="text" [(ngModel)]="rowData.remark">
                                                </ng-template>
                                                <ng-template pTemplate="output">
                                                    {{rowData.remark}}
                                                </ng-template>
                                            </p-treeTableCellEditor>
                                            <span *ngIf="rowData.levelNum < 4"> {{rowData.remark}}</span>
                                        </td>
                                    </tr>
                                </ng-template>
                            </p-treeTable>
                        </div>
                    </div>
                </div>
                <div class="modal-footer" style="margin-top: 14px;">
                    <button style="margin-left: 20px;" pButton type="button" label="送审"
                        (click)="saveToApproval()"></button>
                </div>
            </p-dialog>
            <!-- 审批 -->
            <bomApproval #bomApproval [editData]="sonData" (modalSave)="backToApproval()"></bomApproval>
        </div>
    </div>
</div>